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1. INTRODUCTION 

Nowadays, web development is much simplified because of the emergence of different front-end 
frameworks. In recent years, dozens of frontend frameworks have become available to web developers. 
Front-end CSS development frameworks make the web development process faster, simpler and more 
standards-compliant. And help build a well-structured, maintainable and up-gradable website. Thus they also 
help the developer to save a lot of time because there is a multitude of already prebuilt elements ready to use. 
Each framework has its own strengths and weaknesses, and specific application areas, allowing the developer 
to choose one according to the needs of his specific project [1]. In addition, most of the options are modular, 
allowing to use only the components that the developer needs, or even mix components from different 
frameworks. There are so many framework choices but many developers are attracted to the most popular 
ones like Bootstrap and Foundation. 

The authors [2] state in their study of Responsive Web Design Frameworks that front-end 
frameworks reduce the workload of developers and shorten a front-end development process. These 
frameworks help developers to quickly create a website. So they insist that the Bootstrap framework and 
Foundation have become the most remarkable frameworks by developers and most used. The author [3] in 
his article on Responsive Web Design with the Bootstrap Framework prefers to work with the bootsrap 
framework because it is a stylish, intuitive and powerful front end. Bootstrap has a standard set of classes that 
allow developers to quickly build applications. Bootstrap is the most popular html, css and javascript 
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framework that offers flexibility in the use of tools without much knowledge of languages. Therefore, save 
time from coding heavy code. The author [4] confirms that Bootstrap uses LESS CSS, is compiled via Node, 
and is managed via GitHub to help developers make awesome things on the web. And Foundation is an 
advanced and responsive front-end framework. Foundation 3 is built with Sass, a powerful CSS preprocessor, 
which allows you to develop faster. 

Studies have mounted that it has a debate on the choice of front end framework, in order to make the 
selection process easier, this article focuses on an effective analysis between the Bootstrap and Foundation 
frameworks which are the most used and popular. The reminder of this paper is presented as follow: section 2 
presents a literature review about the subject, then we present trough section 3 our proposed model dedicated 
to the evaluation of web development frameworks. Section 4 presents a discussion of the obtained results, to 
sum up with a conclusion in section 5. 


2. LETARATURE REVIEW 
2.1. Front-end framework 

The framework are common tools in the process of creation of web sites. There exist essentially two 
types of frameworks : front-end and back-end as shown in Figure 1, (this distinction is established according 
to whether the framework is for the presentation layer or the application/logical layer). The back-end of an 
application (a set of files with libraries to access databases, model structures, session management). There is 
many Back-end frameworks (i.e. Zend Framework, Symfony, Laravel, CakePHP ...)[5], [6]. 

A front-end framework is a library to ensure structure and graphical consistency very quickly. 
Structure in columns, typography (font, size, title, paragraph), components (button, form, dropdown, 
carousel, tab, tooltip, alert, modal), states, responsive ; they all bring a number of tools to save a lot of time in 
the creation of website [7]. Front-end frameworks typically consist of a package consisting ofa standard code 
file and folder structure (HTML, CSS, JS documents, etc.). 

The HTML language structures the data, the CSS stylizes this data to make them visually 
comprehensible and aesthetic, the JS (Javascript acronym) allows to produce animations and interactions 
improving the user experience. The usual components are [4], [8] : 

a. CSS source code to create a grid: this allows the developer to position the different elements that make up 
the design of the site in a simple and versatile way. 

b. Typography style definitions for HTML elements. 

c. Solutions for browser incompatibility cases so that the site displays correctly in all browsers. 

d. Create standard CSS classes that can be used to stylize advanced components of the user interface. 


tl a i ar aay a ce ten | 


Presentation layer / Front-End 


User interfaces 


Languages: HTML. CSS, Javascript... 
Frameworks : Bootstrap, Foundation,,.... 


Application layer/Back-End 
Logic and operation of websites 


Languages: PHP. PYTHON. RUBY, JAVA... 
Frameworks : Symfony, Laravel, Ruby on Rails. Spring _.. 


Data layer 


Data persistence on databases 


Technologie: MySQL, PostgreSQL. NoSQL.... 


Figure 1. Back-end and front-end 
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A front-end framework offers preformatted and configurable elements for the components of a web 


page: 
a. A complete and manipulable layout 
b. Modules covering all aspects and current needs 
c. Standard states 
d. Multiple interactive behaviors 
e. A customizable responsive design 


We present blow the advantages of using a front-end framework derived from [5], [9] studies: 
Time saving 
In the case of realization of a new project, the front-end developer must evaluate the development 

time but often the time presses. So thanks to the front-end framework the developer will not have to start 
from scratch. Rather than encode and create all the components of the page, it will have the task of 
assembling the preformatted elements and proposed by the framework. It's like eliminating a step in the 
front-end developer workflow. 
2. Standardization and performance 

A site developed using a framework will be efficient because the framework is optimized for the 
multiple web browsers of the market. 
3. Scalability and update 

The framework is regularly updated to comply with the latest web standards but also to offer 
relevant modules and up-to-date. Using a framework, we benefit from a set of beneficial improvements for 
the construction and implementation of a website that must comply with the latest standards. 
4. Free and Open 

Front-end frameworks are (at least currently) free and open. This means that they can be used 
without paying a license and being able to modify them at will. This is at least the case for Bootstrap and 
Foundation. 
5. Reliability 

The most popular frameworks by hundreds of thousands of developers who attest to the quality and 
reliability of the tool. The bugs are almost non-existent. In short, using a framework eliminates a sometimes 
laborious step that is to design the visual bases of the site and create different modules of zero. In addition to 
saving time, it provides a proven, robust, and scalable structure tested by thousands of users. 


ear 


2.2. Bootsrap 

Bootstrap Twitter is one of the best known and most used CSS frameworks as shown in Figure 2. It 
was developed on Twitter in 2010. This framework runs on a grid system of 12 columns, with 4 types of 
displays possible depending on the width of the user's screen. We can adapt the appearance of the site to the 
visitor's material. The Bootstrap offers components (buttons, navigation bars, form, ...) pretty and easy to 
integrate. Since version 3, it is totally responsive. The elements adapt to the width of the screen by sliding 
one below the other when the width decreases. The adaptation is also done by a different display on the 
screen as we have already said. Its pre-programmed Queries media are now indispensable for smartphones. 
The bootstrap site offers many examples of directly usable templates. Bootstrap is associated with the Less 
preprocessor, a language that offers many features, such as using variables and including portions of code. It 
is thus possible to customize its CSS file with the elements and the colors wanted. The bootstrap of twitter is 
a safe bet in terms of CSS frameworks[10],[11]. Bootstrap offers : 
a. aresponsive grid, CSS styles for all standard HTML elements (form, button, text, image ...) 
b. | JS components such as dynamic drop-down lists, interactive navigation or carousel 
c. a font that is actually a set of icons. The advantage is that the icons are not images but fonts, they are 

vectorized and therefore always sharp on all types of devices [3]. 


2.3. Foundation 

Foundation was created by ZURB in 2008. It is a front end framework that consists of many useful 
tools for creating responsive and mobile first mobile sites. Primarily built with HTML, CSS, and jquery, 
Foundation uses modern techniques and practices, but degrades dramatically from Internet Explorer 8. 
Although the Framework is most commonly used by HTML and CSS developers, the developer has the 
opportunity to take its marks thanks to Foundation in collaboration with Sass and Rails. The company behind 
Foundation, ZURB, has created a rigorously regulated set of tools for developers. Each module has its role to 
play in the whole framework, but at the same time can function completely independently of the central 
leadership. What this means then is that the developer can combine and combine the features of his current 
project, or take a single feature and add it to an older project. It can even add it as a feature to a different 
Framework. In summary, this is a modern framework that has been well built and responds to a wide variety 
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of users. It offers a good set of features. It's free, and there's a growing community of people to help the 
developers if they're stuck[10]. 


@ bootstrap @ foundation 
100 
75 
50 
. Tp pen rw AIF AWAD AAA 
Average 4January 2015 3 January 2016 1 January 2017 


Figure 2. Statistic of the bootstrap and foundation front-end framework 


3. COMPARATIVE STUDY: BOOTSTRAP VS FOUNDATION 
We present below the similarities between the two frameworks, the results are based on [8], [5] 
studies. 

a. Open source : Both frameworks work under MIT license, which means they are free to use and adapt. 

b. Reactivity : Bootstrap and Foundation are reactive right out of the box. They apply the "mobile first" 
approach, which is a design methodology that indicates that it is best to first create the layout for smaller 
screens, then add more content and features as you go. as the screen grows. 

c. 12-column grid system : In terms of frameworks, a grid system gives the developer the power to arrange 
their website or application as shown in Figure 3 and 4. 

Both frameworks have : 
a. Lines and columns 
b. Ability to nest columns in rows, and vice versa 


.col- | .col- | .col- | .col- | .col- | .col- | .col- | .col- | .col- | .col- | .col- | .col- 
md-1 | md-1 | md-1 | md-1 | md-1 | md-1 | md-1 | md-1 | md-1 | md-1 | md-1 | md-1 
.col-md-8 .col-md-4 

.col-md-4 .col-md-4 .col-md-4 

-col-md-6 .col-md-6 


Figure 3. Bootstrap grid example 


-large-12.columns 

-large-6.columns -large-6.columns 

large-4.columns . large-4.columns -large-4.columns 

. large-3.columns . large-3.columns . large-3.columns . large-3.columns 
. large- .. large- . large- . large- . large- .. large- 
2.columns 2.columns 2.columns 2.columns 2.columns 2.columns 


Figure 4. Foundation grid example 
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d. Stylized CSS components 


Bootstrap and Foundation include additional CSS styles for different 


components of the web page, such as typography, tables, forms, navigation bar, buttons, pagination, 
labels, progress bar etc as shown in Figure. 5. 


Bootstrap Foundation 
Navigation 

Active Link Link Site Title One- Two Three 
Buttons 
Pagination 

Previous 1 2 3 Next < Previous E 23 4 12 13 Next 


Figure 5. The different components of bootstrap and foundation 


Table 1 present the basic characteristics of each Framework, a detailed description of each 
framework can be found in [12], [2]. Table 2 presents the CSS charateristics for each framework. Table 3 
presents the charateristics related to grids and the responsiveness of each framework. Table 4 presents the 
charateristics related to the user interface (UI) and widgets of each framework. 


Table 1. Bootstrap and Foundation Comparison 


Bootstrap 


Foundation 


Owned by 


Standard distribution 
package includes 


Additional JavaScript 
libraries required? 


Browser support 


Internet Explorer 
support 

Other browser support 
notes 


License and copyright 


Originally developed at Twitter by Mark Otto and Jacob 
Thornton, now an open-source project 

Required CSS (l minified, 1 standard, both 
with .map files); required JavaScript (1 minified, 1 
standard). Former theme is incorporated in Sass files, 
activated by variables. (Glyphicons are not distributed 
with Bootstrap 4.) Also contains two additional sets of 
CSS files (1 minified, 1 standard, both with .map files): 
bootstrap-grid, which appears to be a flexbox-based grid 
system, possibly redundant at this point; and bootstrap- 
reboot, based on normalize.css. A CDN is available for 
standard distribution files. 


Yes, you must download or link to a CDN separately: 
jQuery 3.1.1 Slim, Tether 1.4.0. Files are linked to just 
before end of body element. 


Latest versions of: Chrome (macOS, Windows, iOS and 
Android), Safari (macOS and iOS), Firefox (macOS, 
Windows, Android, iOS) (latest version of Firefox plus 
Extended Support Release), Edge (Windows, Windows 
10 Mobile), Opera (macOS, Windows), Android Browser 


& WebView 5.0+, Windows 10 Mobile, Internet 
Explorer 10+ 
Internet Explorer 10 and higher (Bootstrap 3 


recommended for Internet Explorer 8 and 9) 
“Unofficially, Bootstrap should look and behave well 
enough in Chromium and Chrome for Linux, Firefox for 
Linux, and Internet Explorer 9, though they are not 
officially supported.” 

Code and documentation copyright (2011 to 2017) of the 
Bootstrap authors and Twitter, Inc. Code released under 
the MIT License. Docs released under Creative 
Commons. 


ZURB, a web development company in 
Campbell, California 

Four distributions : Complete, Essential, 
Custom, Sass. Complete version includes 
compiled CSS (minified and not), plus 
compiled JavaScript, including individual 
vendor files. Essential includes typography, 
grid, Reveal, and Interchange only. Custom 
can be customized on the website for 
downloading, and the developer can choose 
elements to include and change a few 
variables. The Sass version can only be 
downloaded using the command line, 
Foundation CLI or Yeti Launcher. A CDN is 
available for standard distribution files. 

All dependencies are bundled in the 
distribution. jQuery is required, but it is part 
of the distribution. Files are linked to just 
before end of body element. 

Last two versions of Chrome, Firefox, Safari, 
Opera, mobile Safari, Internet Explorer 
mobile, as well as Internet Explorer 9+ and 
Android browser 2.3+ 


Internet Explorer 9 and higher 

“JavaScript: Our plugins use a number of 
handy ECMAScript 5 features that aren’t 
supported in IE8.” 


MIT license, no mention of copyright 
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Table 1. Bootstrap and Foundation Comparison 
Bootstrap Foundation 

Build tools “Bootstrap uses Grunt for its CSS and JavaScript build To access Sass files, you must install using 
system and Jekyll for the written documentation. Our the command line, the Node.js-powered 
Gruntfile includes convenient methods for working with Foundation CLI, or with its Yeti Launch 
the framework, including compiling code, running tests, application (Mac only). “Foundation is 
and more.” ( available on npm, Bower, Meteor, and 
Composer. The package includes all of the 
source SCSS and JavaScript files, as well as 
compiled CSS and _ JavaScript, in 
uncompressed and compressed flavors.” 
Other versions of Foundation are available as 
simple downloads without using these tools, 

but without SCSS files. 


Table 2. CSS Comparison 


Bootstrap Foundation 
Reset reboot.css(_reboot.scss)  normalize.css 
LESS Yes No 
Sass/Scss Yes Yes 


Table 3. Grids and Responsiveness Comparison 


Bootstrap Foundation 

Base width Fluid (0, 34em, 48em, 62em, 75em) Fluid (max-width 75rem default) 
Columns 12 1-infinity (12 default) 
Single column class syntax .col-xs-1 .small-1.columns 

-col-sm-1 -medium-1.columns 

.-col-md-1 .large-1.columns 

-col-lg-1 . [custom]-1.columns 

ccolegIsi 
Container syntax <div class="container"> <div class="row"> 

or 


<div class="container-fluid"> 


Nested column syntax <div class="row"> <div class="row"> 
<div class="col-sm-9"> <div class="small-6 columns"> 
<div class="row"> <div class="row"> 
<!-- nested columns add up <!-- nested columns add up 
to 12 --> to 12 --> 
<div class="col-xs-8 col- <div class="small-6 
sm-6">...</div> columns">...</div> 
<div class="col-xs-4 col- <div class="small-6 
sm-6">...</div> columns">...</div> 
</div> </div> 
</div> </div> 
</div> </div> 
a seg ee Viewport-based: Screen Size: 
Visibility class syntax 
-hidden-xs-down . show-for-medium 
-hidden-sm-down .show-for- [custom 
.hidden-md-down .show-for-medium-only 
.hidden-lg-down .show-for-[custom]-only 
.hidden-xl-down .hide-for-medium 
.hidden-xs-up .hide-for-[custom 
.hidden-sm-up .hide-for-medium-only 
.hidden-md-up .hide-for-[custom]-only 


.hidden-1lg-up 
Generic (CAUTION: hides from 
.hidden-xl-up 
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Table 3. Grids and Responsiveness Comparison 
Bootstrap Foundation 
screenreaders): 
Print-based: 
-hide (display: none; ) 
-visible-print-block 
.invisible (visibility: hidden; ) 
-visible-print-inline 
-visible-print-inline-block Orientation: 
-hidden-print . show-for-landscape 
.show-for-portrait 
.hide-for-landscape 
»hide-for-portrait 
Accessibility: 
.show-for-sr (hides visually only) 
.show-on-focus (for skip-lin 
Table 4. User Interface (UI) and Widgets 
Bootstrap Foundation 
Alerts Yes Yes — Callout 
Breadcrumbs Yes Yes 
Buttons Yes Yes 
Carousel Yes Yes — Orbit is back 
Collapse/Accordion Yes — Collapse Yes — Accordion 
Dropdown Yes Yes — Dropdown, Drilldown, & Accordion menus 
Forms Yes Yes 
Form Validation Yes Yes — Abide 
Grids Yes Yes 
Icons Yes Yes — with download 
Labels Yes Yes 
Pagination Yes Yes 
Panels Yes — now Cards Yes — Callout 
Progress bars Yes Yes 
Responsive media No Yes — Interchange 
Tables Yes Yes 
Tooltips Yes Yes 


4. DISCUSSION OF RESULTS 
In this section we depict the differences between Bootstrap and Foundation. We presents trough 
Table 5 the main results derived from our study. 


Table 5. Results of Comparison 


CSS Preprocessor 


Both Foundation 6 and Bootstrap 4 frameworks are based on SASS. They both have a good set of 
mixins, a separate parameter sheet, reusable components, and so on. 


JavaScript 


Stability 


The Bootstrap 4 and Foundation 6 JavaScript libraries are written on ES6, which means that the 
devellopper does not need Babel (or any other transpiler) if it wants to individually include each 
of their JS tools in its development pipeline. However, they both have ESS transpired versions of 
each component. 

The Bootsrap team takes stability and backward compatibility seriously. They use Saucelabs' 
automated testing tools to ensure that everything passes a test before engaging in their main 
branch. The result is a set of very stable tools that can be used as a daily driver. 

Foundation, on the other hand, was released as "stable" a little over a year ago. At first launch, 
some components were unfinished, like Abide (their form validation library) which was 
completely broken, so their color palette settings. From 6 to 6.3, the team changed a number of 
things by making some settings obsolete and introducing things like ES6 to 6.2. The offcanvas 
has been reorganized and the parameters are very flexible in 6.3. 

Since Foundation 6 has been released, its stability is now excellent. The components seem to be 
well tested and the team publishes updates almost every 3-4 months. 
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Table 5. Results of Comparison (continue) 

Both Foundation 6 and Bootstrap 4 frameworks are based on SASS. They both have a good set of 

mixins, a separate parameter sheet, reusable components, and so on. 

Grid Bootstrap and Foundation support responsive grids and flexible breakpoints. However, 
Foundation supports responsive gutters, which are so easy to configure and seem magical. 
Collapsed gutters are also a thing in Foundation. The developer may have or remove gutters in 
specific cases that do not require them simply by adding a class. Other things like centered 
columns and block grids make the Foundation the winner in grids. 

As far as backward compatibility is concerned, Foundation and Bootstrap use the same class 
convention as their previous versions. This makes the migration as painless as possible. 

Flexbox grids are also available on Foundation and Bootstrap as a separate setting that the 
developer can turn on / off based on support for their target browser. 

forms In Bootstrap 4, there are special classes for radios and checkboxes that will make them much 

better than the default ones of the browser. Online forms, validation icons, and icon labels are also 
very powerful on Bootstrap. 
Foundation 6 has a simpler form layout that is heavily dependent on the grid. Online forms do not 
exist in the Foundation, which is almost missed. In addition, predefined fields are prohibited on 
Foundation, so the developer must rely on external CSS to justify its selection boxes, radio 
buttons and checkboxes. 

Menus While Bootstrap 4 has the same old drop-down lists, tabs, and basic navigation menus that we 
learned from version 3, Foundation has dramatically improved their drop-down lists by including 
other variations that might be useful in some case. 

Browser support Both frameworks support the following browsers: Chrome (Mac, Windows, iOS and Android), 
Safari (Mac and iOS only), Firefox (Mac and Windows) and Opera (Mac and Windows). 
However, there is a slight difference with regard to Internet Explorer - Bootstrap supports IE8 and 
newer versions, while Foundation starts at IE9 plus newer versions. 

CSS preprocessors Bootstrap includes SASS and LESS files, which means that it can be used in applications that use 
one of these CSS preprocessors. On the other hand, Foundation only supports SASS. 


CSS Preprocessor 


After the comparative study of the two front-end frameworks Bootstrap and foundation, we see that 
each framework has its own features and benefits and the choice between these two frameworks depends on 
the needs of the developer's web application. 

To help the developer choose the right framework for the design of his project, we present the main 
advantages of each framework: the first one is Bootstrap: 

a. Massive community support: Given the huge popularity of Bootstrap, there is a large community using 
the Framework. Therefore, if the developer has a question about Bootstrap, he is more likely to find 
quickly an answer. Further, there are more tutorials as well as full courses on how to use Bootstrap. 

b. Other themes available: Because of its popularity, there are other Bootstrap themes. This means that if the 
developer uses a platform like WordPress and is looking for a theme to use, this might be a better option. 

c. Better browser compatibility 

d. Can use Less or Sass 
Many professional websites have used Bootstrap to create elegant and functional pages. Among them: 
Newsweek, Vogue and Lyft. We present trough Figure 6, the statistics about the use of this framework. 


Business $ DE 
Shopping 

Education ME 

News Eo 

Technology as 

Health = 

Travel | 


O 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000 
mTop 10,000 Sites mTop 100,000 Sites m Top 1Million Sites 


Figure 6. Bootstrap popular website 
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Likewise, we present the advantages of Foundation Framework: 

a. More than one design approach by the developer: Foundation provides a better environment for 
customizing the web site. Although it is possible to customize with Bootstrap, it takes a lot of effort for 
the developer site to look like other Bootstrap sites. With Foundation, the detached CSS design is a 
lightweight design and the developer does not have to put a lot of effort into customizing it. 

b. Foundation does not need to add classes to be responsive or have a certain style: If the developer does not 
add the correct CSS classes with Bootstrap, the effects do not appear. With Foundation, there are built-in 
basic CSS appearances. Some may prefer this, especially since there will not be as much CSS in its 
HTML. 

c. More features of the grid system: Many prefer the Foundation grid system because they find it offers 
more flexibility. Some additional abilities : 

1. The ability to center columns 
2. The developer can add a "collapse" class that allows him to easily edit columns and remove gutters. 
3. Can use a block grid that allows you to create columns of equal size with minimal markup. 

d. Other built-in widgets: With regard to additional components and JS extensions, Bootstrap and 

Foundation are basically equal. Here are some extra that Foundation. 

1. Form validation, Abide : HTMLS form validation library 

2. Menus off canvas : the developer easily places the navigation of his site on the side of his site 

3. Pricing tables : ready-to-use table, designed to display the prices of a product by subscription 
Responsive media 

4. Reactive media, exchange : the website loads different media for different devices / screen sizes, so 
that the developer can customize the user experience 

5. Support from right to left : the developer the direction of the text ; Ideal for sites in other languages 
where characters move from right to left 

6. Sites using Foundation as shown in Figure 7: Just like Bootstrap, Foundation is used by big names. 
Among them: PBS, National Geographic, The Washington and PostMozilla. 


Business |! 
Education —— 
Shopping Do 
Technology mem 
Health EE 
News = 
Entertainment mmm 

0 200 400 600 800 1000 1200 

mTop 10,000 Sites mTop 100,000 Sites =Top 1Million Sites 


Figure 7. Foundation popular website 


5. CONCLUSION 

Using a front-end framework is great for people who want to create content quickly, or at least not 
doing it from scratch. Without a doubt, the use of a front-end framework facilitates the work of the 
developer. Many web sites use Bootstrap and Foundation because they can both meet the needs of 
developers, and to choose the right framework. In this context this paper provided a detailed analysis of these 
two frameworks, to enhance the process of frameworks selection. The results of this contribution provide 
guidelines to front-end developers to select the appropriate framework based on the framework popularity, 
the active development of the framework, framework maturity, framework documentation, and finally the 
level of specificity of the framework. 
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